<template>
  <div>
    <div class="purchaser-info">
      <div class="locate-icon">
        <i class="iconfont icon-wode2"></i>
      </div>
      <div class="purchaser-name">
        <p>
          <span>姓名：王艳</span>
          <span class="purchaser-tell">15198756156</span>
        </p>
        <p>地址：北京市海淀区西三旗街道堕落小吃街</p>
      </div>
    </div>
    <div>
      <p class="purchaser-order">
        <span>订单号：</span>
        <span>下单时间：</span>
      </p>
      <div class="purchaser-shop clearfix"> 
        <img src="../../../assets/himages/2.png" alt="">
        <div class="purchaser-shop-title">
          <p>精品红豆薏仁粉</p>
          <p>大小：大盒；包装：盒装</p>
        </div>
        <div class="purchaser-number clearfix">
          <span>价格：￥98</span>
          <span>数量：1</span>
          </div>
      </div>
    </div>
  </div>
  
</template>

<script>
  export default {
    name: 'Purchaser'
  }
</script>

<style scoped>
.purchaser-info{
  background-color: #fff;
  height: 2.7rem;
  padding: 0.65rem 0.72rem 1.15rem 0;
  box-sizing: border-box;
  color: #555;
}
.purchaser-info>div{
  float: left;
}
.locate-icon{
  width: 1.05rem;
  height: 0.9rem;
  line-height: 0.9rem;
  text-align: center;
}
.locate-icon i{
  color: #13bf92;
}
.purchaser-name p:first-child{
  margin-bottom: 0.3rem;
}
.purchaser-tell{
  float: right;
}
/**/
.purchaser-order{
  margin: 0.42rem 0.2rem 0.15rem 0.2rem;
}
.purchaser-order span:first-child{
  float: left;
}
.purchaser-order span:last-child{
  float: right;
}
/**/
.purchaser-shop{
  background-color: #fff; 
}
.purchaser-shop img{
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.2rem 0.4rem 0 0.2rem;
  float: left;
}
.purchaser-shop-title{
  float: left;
  padding-top: 0.3rem;
}
.purchaser-shop-title p:first-child{
  font-size: 0.26rem;
}
.purchaser-shop-title p:last-child{
  font-size: 0.24rem;
  color: #999;
  margin-top: 0.2rem;
}
.purchaser-number{
  clear: both;
  padding: 0.32rem 0.2rem 0.2rem 0.2rem;
}
.purchaser-number span{
  float: right;
  margin-left: 0.4rem;
}

</style>